<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <title>个人中心</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" rel="stylesheet"/>
    <!-- bootstrap-table 表格插件样式 -->
    <link href="../static/ajax/libs/bootstrap-table/bootstrap-table.min.css?v=20200727" rel="stylesheet"/>
    <link href="../static/css/animate.css" rel="stylesheet"/>
    <link href="../static/css/style.css?v=20200903" rel="stylesheet"/>
    <link href="../static/ruoyi/css/ry-ui.css?v=4.4.0" rel="stylesheet"/>
</head>
<body class="gray-bg" style="font: 14px Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif !important;">
<section class="section-content">
    <div class="row">
        <div class="col-sm-3 pr5">
            <div class="ibox float-e-margins">
                <div class="ibox-title ibox-title-gray dashboard-header gray-bg">
                    <h5>个人资料</h5>
</div>
<div class="ibox-content">
    <div class="text-center">
        <p class="user-info-head" onclick="avatar()"><img class="img-circle img-lg" src="https://demo.ruoyi.vip/img/profile.jpg"></p>
        <p><a href="javascript:avatar()">修改头像</a></p>
    </div>
    <ul class="list-group list-group-striped">
        <li class="list-group-item"><i class="fa fa-user"></i>
            <b class="font-noraml">登录名称：</b>
            <p class="pull-right">admin</p>
        </li>
        <li class="list-group-item"><i class="fa fa-phone"></i>
            <b class="font-noraml">手机号码：</b>
            <p class="pull-right">15888888888</p>
        </li>
        <li class="list-group-item"><i class="fa fa-calendar"></i>
            <b class="font-noraml">创建时间：</b>
            <p class="pull-right">2018-03-16</p>
        </li>
    </ul>
</div>
</div>
</div>
<div class="col-sm-9 about">
    <div class="ibox float-e-margins">
        <div class="ibox-title ibox-title-gray dashboard-header">
            <h5>基本资料</h5>
        </div>
        <div class="ibox-content">
            <div class="nav-tabs-custom">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#user_info" data-toggle="tab" aria-expanded="true">基本资料</a></li>
                    <li class=""><a href="#modify_password" data-toggle="tab" aria-expanded="false">修改密码</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="user_info">
                        <form class="form-horizontal" id="form-user-edit" novalidate="novalidate">
                            <input id="userId" name="userId" type="hidden">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">用户名称：</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control valid" name="name" placeholder="请输入用户名称" id="userName" value="若依" aria-required="true" aria-invalid="false">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">手机号码：</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control valid" name="phone" maxlength="11" placeholder="请输入手机号码" id="phonenumber" value="15888888888" aria-required="true" aria-invalid="false">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    <button type="button" class="btn btn-sm btn-primary" onclick="submitUserInfo()"><i class="fa fa-check"></i>保 存</button>&nbsp;
                                    <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="tab-pane" id="modify_password">
                        <form class="form-horizontal" id="form-user-resetPwd" novalidate="novalidate">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">旧密码：</label>
                                <div class="col-sm-10">
                                    <input type="password" class="form-control" name="oldPassword" placeholder="请输入旧密码">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">新密码：</label>
                                <div class="col-sm-10">
                                    <input type="password" class="form-control" name="newPassword" id="newPassword" placeholder="请输入新密码">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">确认密码：</label>
                                <div class="col-sm-10">
                                    <input type="password" class="form-control" name="confirmPassword" placeholder="请确认密码">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    <button type="button" class="btn btn-sm btn-primary" onclick="submitChangPassword()"><i class="fa fa-check"></i>保 存</button>&nbsp;
                                    <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</section>
<a id="scroll-up" href="#" class="btn btn-sm display" style="cursor: pointer; position: fixed; right: 15px; bottom: 5px; display: inline;"><i class="fa fa-angle-double-up"></i></a>
<script src="../static/js/jquery.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/ajax/libs/bootstrap-table/bootstrap-table.min.js?v=20200727"></script>
<script src="../static/ajax/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js?v=20200727"></script>
<script src="../static/ajax/libs/bootstrap-table/extensions/mobile/bootstrap-table-mobile.js?v=20200727"></script>
<script src="../static/ajax/libs/validate/jquery.validate.min.js"></script>
<script src="../static/ajax/libs/validate/messages_zh.min.js"></script>
<script src="../static/ajax/libs/validate/jquery.validate.extend.js"></script>
<script src="../static/ajax/libs/bootstrap-treetable/bootstrap-treetable.js"></script>
<script src="../static/ajax/libs/blockUI/jquery.blockUI.js"></script>
<script src="../static/ajax/libs/iCheck/icheck.min.js"></script>
<script src="../static/ajax/libs/layer/layer.min.js"></script>
<script src="../static/ajax/libs/layui/layui.js"></script>
<script src="../static/ruoyi/js/common.js?v=4.4.0"></script>
<script src="../static/ruoyi/js/ry-ui.js?v=4.4.0"></script>
<script>
    var user=JSON.parse(window.localStorage.getItem('user'));
    console.log(user.name);
    $(function () {
        console.log(user.phone);
        $("#userId").val(user.userId);
        $(".pull-right").eq(0).html(user.name);
        $(".pull-right").eq(1).html(user.phone);
        $(".pull-right").eq(2).html(user.createTime);
        $(".col-sm-10 input[type='text']").eq(0).val(user.name);
        $(".col-sm-10 input[type='text']").eq(1).val(user.phone);
        $(".img-circle").attr("src",user.avatarUrl);
    })
    var ctx=window.localStorage.getItem('ctx');
    /*用户管理-头像*/
    function avatar() {
        var url = ctx + 'user/profile/avatar';
        top.layer.open({
            type: 2,
            area: [$(window).width() + 'px', $(window).height() + 'px'],
            fix: false,
            //不固定
            maxmin: true,
            shade: 0.3,
            title: "修改头像",
            content: url,
            btn: ['确定', '关闭'],
            // 弹层外区域关闭
            shadeClose: true,
            yes: function(index, layero) {
                var iframeWin = layero.find('iframe')[0];
                iframeWin.contentWindow.submitHandler(index, layero);
            },
            cancel: function(index) {
                return true;
            }
        });
    }

    /*用户信息-修改*/
    $("#form-user-edit").validate({
        onkeyup: false,
        rules:{
            userName:{
                required:true,
                remote: {
                    url: ctx + "user/modify/name.do",
                    type: "post",
                    dataType: "json",
                    data: {
                        "name": function() {
                            return $.common.trim($("#userName").val());
                        }
                    },
                    dataFilter: function (res, type) {
                        res=JSON.parse(res);
                        return $.validate.unique(res.data);
                    }
                }
            }
        },
        messages: {
            "userName": {
                required: "请输入用户名称",
            }
        },
        focusCleanup: true
    });

    function submitUserInfo() {
        if ($.validate.form()) {
            $.operate.saveModal(ctx + "user/update/profile.do", $('#form-user-edit').serialize(),function (res) {
                if(res.code==200){
                    window.localStorage.setItem('user',JSON.stringify(res.data));
                    $.modal.reload();
                }
            });
        }
    }

    /*用户管理-修改密码*/
    $("#form-user-resetPwd").validate({
        onkeyup: false,
        rules:{
            oldPassword:{
                required:true,
                remote: {
                    url: ctx + "user/modify/password.do",
                    type: "get",
                    dataType: "json",
                    data: {
                        password: function() {
                            return $("input[name='oldPassword']").val();
                        }
                    },
                    dataFilter: function (res, type) {
                        res=JSON.parse(res);
                        return $.validate.unique(res.data);
                    }
                }
            },
            newPassword: {
                required: true,
                minlength: 6,
                maxlength: 20
            },
            confirmPassword: {
                required: true,
                equalTo: "#newPassword"
            }
        },
        messages: {
            oldPassword: {
                required: "请输入原密码",
                remote: "原密码错误"
            },
            newPassword: {
                required: "请输入新密码",
                minlength: "密码不能小于6个字符",
                maxlength: "密码不能大于20个字符"
            },
            confirmPassword: {
                required: "请再次输入新密码",
                equalTo: "两次密码输入不一致"
            }

        },
        focusCleanup: true
    });

    function submitChangPassword () {
        var chrtype = 0;
        var password = $("#newPassword").val();
        if ($.validate.form("form-user-resetPwd") && checkpwd(chrtype, password)) {
            $.operate.saveModal(ctx + "user/update/password.do", $('#form-user-resetPwd').serialize(),function (res) {
                if(res.code==200){
                    window.localStorage.setItem('user',JSON.stringify(res.data));
                    $.modal.reload();
                }
            });
        }
    }
</script>


</body>
</html>